<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>
        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left">
                <comps:categoriesMenu />
            </ui:define>

            <ui:define name="principal">
                <h:outputText value="Denuncia de Comentario" style="font: normal 1.3em sans-serif;"
                              rendered="#{denuncia.comentario != null}" />
                <h:outputText value="Denuncia de Publicación" style="font: normal 1.3em sans-serif;" 
                              rendered="#{denuncia.comentario == null}" />

                <br/>

                <table>
                    <tr>
                        <td>
                            <h:outputLabel value="Publicacion : #{denuncia.publicacion}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="itemPregunta">
                                <table cellspacing="0" cellpadding="5">
                                    <tr>
                                        <td width="30px">
                                            <h:outputText value="Comentario:" 
                                                          rendered="#{not empty denuncia.comentario}"/>  
                                        </td>
                                        <td>
                                            <h:outputText value="#{denuncia.comentario.comentario}"
                                                          rendered="#{not empty denuncia.comentario}"/> 
                                        </td>
                                    </tr>                                
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr> 
                        <td >
                            <h:form>
                                <div class="preguntas" style="text-align: center;">
                                    <table style="width: 600px">
                                        <tr>
                                            <td>
                                                <h:outputText value="Seleccione un motivo:"/>
                                            </td>
                                            <td>
                                                <h:selectOneMenu value="#{denuncia.motivoSeleccionado}"
                                                                 style="width: 150px; margin-left: 40px">
                                                    <f:selectItems value="#{denuncia.motivos}" />
                                                </h:selectOneMenu>                                            
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <h:outputLabel for="explicacion" value="Si desea, puede detallar la razón de su denuncia:"  /><br/>
                                                <p:inputTextarea id="explicacion" style="width: 400px; height: 200px" validatorMessage="Ingrese menos de 300 caracteres."
                                                                 value="#{denuncia.descripcionDenuncia}" >
                                                    <f:validateLength maximum="300" />
                                                </p:inputTextarea>
                                                <br/>
                                                <p:message for="explicacion" />
                                                <p:commandButton value="Ingresa denuncia" style="margin-top: 10px;"
                                                                 action="#{denuncia.saveDenuncia}" update="@form grow"/>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <p:growl id="grow" showDetail="true"  globalOnly="true" />
                            </h:form>
                        </td>    
                    </tr>
                </table>

            </ui:define>            
        </ui:composition>
    </body>
</html>
